<template>
  <div class="login-box">
    <div class="logo-box">
     <!-- <div class="logo">
        <image src="../static/images/logo.png" class="img" />
      </div> -->
      <div class="logo-text" >观界</div>
    </div>
    <div class="login-btn-box">
      <button
        type="primary"
        open-type="getPhoneNumber"
        class="roki-login-btn"
        @getphonenumber="getPhoneFun"
      >
	  <div class="btn-content-box">
		  <div class="left">
			  <div class="ch-text">手机号一键登录<br/><span class="en-text">Agree and Submit</span></div>
			   
		  </div>
		  <div class="right">
			  <div class="dot-box">
				  <div class="dot dot1"></div>
				  <div class="dot dot2"></div>
			  </div>
			  <div class="dot dot3"></div>
		  </div>
	  </div>
         
      </button>
 
    </div>
 
  
  </div>
</template>

<script setup>
	import {registApi} from "@/api/index.js";
	import { useUserStore} from "@/stores/index.js";
	const userStore=useUserStore();
 const wxloginCode=ref('');
 const registFun=(data={})=>{
	 registApi(data).then(res=>{
		 const {token,user}=res.data||{};
		 userStore.$patch((state)=>{
		 	state.token=token||'';
		 	state.userInfo=user||{};
		 });
		 uni.setStorageSync("token",token||'');
		 uni.showToast({
		 	title:'登录成功'
		 });
		 uni.navigateBack({
			 delta:1
		 })
	 })
 }
 const getPhoneFun=(e)=>{
   console.log("e---", e.detail); //api scope is not declared in the privacy agreement
   const msg = e.detail;
   if (e.detail?.errMsg != "getPhoneNumber:ok") {
	 return;
   }
   const { code,iv,encryptedData} = e.detail;
   wx.login({
     success: res => {
		// 发送 code 到服务器获取新 
		console.log('wx.login---获取code---',res)
		 registFun({code:res.code,iv,encryptedData})
   	 
     }
   })
 }
 onLoad(()=>{
 
 })
 
</script>

<style lang="scss" scoped>
 
	.btn-content-box{
		display:flex;
		justify-content: center;
		align-items: center;
		background: #000;
		color:#fff;
		position: relative;
		// min-width:400rpx;
		height:160rpx;
		.left{
			.ch-text{
				font-size:42rpx;
				font-weight:500;
				line-height:48rpx;
			} 
			.en-text{
				font-weight:400;
				font-size:24rpx;
				font-style: italic;
			}
		}
		.right{
			position: absolute;
			top:0;
			right:0;
			height:100%;
			padding-right:30rpx;
			display:flex;
			align-items: center;
			.dot-box{
				margin-right:16rpx;
				.dot1{
					margin-bottom:30rpx;
				}
			}
			.dot{
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background: #edcd95;
			}
		}
	}
.login-box {
  height: 100%;
  .img {
    display: block;
    margin: 0;
  }
  .logo-box {
    padding-top: 190.38rpx;
    text-align: center;
    margin-bottom: 180.77rpx;
    .logo {
      .img {
        width: 306rpx;
        height: 86rpx;
        margin: 0 auto;
      }
    }
    .logo-text {
      font-size: 56rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 600;
      color:#000;
      line-height: 54rpx;
      letter-spacing: 12px;
      margin-top: 30.77rpx;
	  
    }
  }
  .login-btn-box {
    //padding:0 38.46rpx 76.92rpx 38.46rpx;
    padding: 0 0 76.92rpx 0;
    position: relative;
    .roki-login-btn {
		background: transparent;
      // border-radius: 46rpx;
      //font-size: 35rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      //font-weight: 500;
      color: #ffffff;
		width: 80%;
      margin: 0 auto;
    }
    .roki-login-btn-un {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 100;
    }
  }
}
</style>
